import React from 'react';
import { Tree } from 'antd';

const { TreeNode } = Tree;
const GroupTree = props => {
  const { data } = props
  const formatData = d => {
    const data = []
    d.map(e => 
      e.childList.length > 0 ?
      data.push({ 
        ...e,
        childList: formatData(e.childList)
      }) :
      data.push({ 
        ...e,
      })
    )
    return data
  }
  const renderTree = (data = []) => 
    data.map(item => {
      if (item.childList) {
        return (
          <TreeNode title={item.name} key={item.id}>
            {renderTree(item.childList)}
          </TreeNode>
        );
      }
      return <TreeNode key={item.id} title={item.name} {...item} />;
  });
    
  return (
    <>
      <Tree {...props}>
        {renderTree(data)}
      </Tree>
    </>
  );
};

export default GroupTree;